<template>
	<el-dialog v-model="visible" :title="title || $t('Previewfiles')" width="1200px" center :destroy-on-close="true" :fullscreen="isFullscreen">
		<el-scrollbar height="600px" ref="scrollbarRef">
			<div class="iframe">
				<iframe id="iframe-part" :src="fileUrl" frameborder="0" style="width:100%;height: 100%;"></iframe>
			</div>
		</el-scrollbar>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref,nextTick,onMounted } from 'vue'
import { BASE_URL_BACK } from '@/config'
import { WEIRUANPERVIEW, WEIRUANPERVIEWLIST } from '@/config/youfu'
import { postApi } from '@/api/api'

const isFullscreen = ref(false)
const prop = defineProps({
	title: String
})
const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
/**
 * 1: 文件类型
 * 2: 图片类型
 */
const fileType = ref(1)
const fileUrl = ref('')
const preInitUrl = ref(WEIRUANPERVIEW)
const init = (data?: any) => {
	visible.value = true
	if(WEIRUANPERVIEWLIST.includes(data.name.slice(data.name.lastIndexOf('.') + 1))){
		fileUrl.value = preInitUrl.value + (data.img || data.url)
	}else{
		fileUrl.value = data.img || data.url
	}
	// console.log(data)
	// nextTick(() => {
	// 	var ifra = document.getElementById('iframe-part');
	// 	console.log(ifra.contentWindow.document.getElementsByClassName('container'));
	// 	// ifra.contentWindow.document.getElementsByClassName('container')[0].style.display= 'none';
	// })
}
const getConfig = (key: any) => {
	postApi('/api/config/list', {
		key: key
	}, '').then((res: any) => {
		const resultData = res.data.data || res.data
		const previewInfo = resultData.find(i => i.key == 'preview-config')
		if (previewInfo && previewInfo.value) {
			try {
				const previewValue = JSON.parse(previewInfo.value);
				const preItem = previewValue.list.find(i => i.id == previewValue.id)
				preInitUrl.value = preItem.url
				console.log(preItem, preInitUrl.value);
			} catch (error) {
				preInitUrl.value = WEIRUANPERVIEW
				console.log(error);
			}
		} else {
			preInitUrl.value = WEIRUANPERVIEW
		}
	})
}
onMounted(() => {
    if (window.screen.width <= 600) {
        isFullscreen.value = true;
    }
	getConfig('preview-config');
})
defineExpose({
	init
})
</script>
<style lang="scss" scoped>
	.iframe{
		height: 580px;
		img{
			max-width: 20%;
		}
	}
</style>